<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*" %>
<%@ include file="/page/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<%@ include file="/adapter/adapter-bootstrap.jsp" %>
<title>APP用户功能使用分析</title>
<script src="${ctx}/js/esl/esl.js"></script>
<script type="text/javascript">
function  goBack(){
	window.history.back(-1);
}

function init(){
	  
}

  
</script>
</head>
<body  onload="init()">
<div class="panel panel-default">
   <div class="panel-heading">
      <h3 class="panel-title">
      APP用户功能使用分析
      </h3>
   </div>
   <div class="panel-body" style="text-align: center;">
		<div id="pie"style="height:400px;margin:0 auto;text-align: center;"></div>
		<div id="detail" style="height:100px;border:2px solid yellow;text-align: left;">
			<span style="font-family: 华文行楷;font-size: 18px;margin: 10px;">前九个用户使用量最多的功能：</span><br/>
			<span style="margin-left: 10px;">${detail}</span>
			<!-- <span style="margin-left: 10px;">正奇综合业务系统（生产环境）：3155，天津：735，上海：714，重庆：681，河北：475，河南：369，云南：322，辽宁：252，黑龙江：241，湖南：128。</span> -->
		</div>
		<script type="text/javascript">
		var fileLocation ='${ctx}/js/echarts';
		require.config({
		    paths:{ 
		         'echarts': fileLocation,
		         'echarts/chart/line': fileLocation,
		         'echarts/chart/bar': fileLocation,
		         'echarts/chart/pie': fileLocation
		    }
		});
		// 作为入口
		require(
		    [
		        'echarts',
		        'echarts/chart/pie'
		    ], 
			displayChart
		);

		function displayChart(ec) {
		    	//饼图
				var pieChart = ec.init(document.getElementById('pie'));
				var pieChartOtion = getPieChartOption();	
		        pieChart.setOption(pieChartOtion);
		    }
			
			//获得Pie图的选项和数据
			function getPieChartOption(){
			  var pieChartOption = {
					  
					    title : {
					        text: 'APP用户功能使用分析',
					        //subtext: '统计用户对系统相关功能的使用数量',
					        x:'center'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient: 'vertical',
					        x: 'left',
					        data: [<%=request.getAttribute("array")%>]
					    /* data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] */
					    },
					    series : [
					        {
					            name: '功能使用',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '50%'],
					            data:<%=request.getAttribute("content")%>,
					            /* data:[
						                {value:335, name:'直接访问'},
						                {value:310, name:'邮件营销'},
						                {value:234, name:'联盟广告'},
						                {value:135, name:'视频广告'},
						                {value:1548, name:'搜索引擎'}
						            ], */
					            
					        itemStyle: {
			                    normal: {
			                        areaStyle: {
			                            type: 'default'
			                        },
			                        label:{
			                            data: [<%=request.getAttribute("array")%>]
			                        }
			                    }
			                }
					        }
					    ]
					};
			
			return pieChartOption;
			}
    </script>
   </div>
</div>

<%@ include file="/page/foot.html" %>
